import React, { Fragment } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  findNodeHandle,
  LayoutAnimation,
  TouchableOpacity,
  Dimensions,
  Image,
  StatusBar,
  Keyboard
} from 'react-native'
import {
  ScaleS,
  ScaleT,
  ONE_PIXEL,
  WIDTH,
  HEIGHT,
  STATUSBAR_HEIGHT, IS_IOS, IS_ANDROID
} from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { connect } from 'react-redux'

import { showModal, showTipModal } from 'src/utils/ModalUtil'
import NavigationUtil from 'src/utils/NavigationUtil'
import ThreeDotComponent from 'src/pageP/home/home-page/components/ThreeDotComponent'
import WhiteWrap from 'src/pageP/home/home-page/components/WhiteWrap'
import {
  INIT_USERINFO_ACTION,
  UPDATE_USERINFO_ACTION
} from '@store/actions/userinfo'
import { INIT_MAIN_PAGE_B_ACTION } from 'src/pageB/main/main-page/store/action'
import { INIT_MAIN_PAGE_C_ACTION } from 'src/pageC/mine/mine-page/store/action'
import { TabView, SceneMap } from 'react-native-tab-view'
import Animated from 'react-native-reanimated'
import {
  homeChannelDetail,
  livePostList,
  getPostDetail,
  blackPost,
  searchChatGroupByChannelId,
  channelState,
  watchChannel
} from 'src/utils/RequestAPI'
import LiveHeader from './components/LiveHeader'
import PolyvLiveView from './components/PolyvLiveView'
import PolyvLiveSkin from './components/PolyvLiveSkin'
import PolyvVodView from './components/PolyvVodView'
import CompanyInfo from './components/CompanyInfo'
import QueryQuestion from './QueryQuestion'
import { ShowLoading, DismissLoading } from 'src/utils/ToastUtil'
import moment from 'moment'
import SharePage from 'src/components/share-page/index'
import LivePost from './components/LivePost'
import BackHandlerUtil from 'src/utils/BackHandlerUtil'
import { formatTime } from 'src/utils/TimeUtil'

const dataKeys = ['partTimeDataArr', 'practiceDataArr', 'fullTimeDataArr']
const TAG = 'LiveDetail'
// 发送行为
const mapDispatchToProps = dispatch => ({
  updateUserInfo (payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  },
  initUserInfoState () {
    dispatch({
      type: INIT_USERINFO_ACTION
    })
  },
  initBMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_B_ACTION
    })
  },
  initCMainCenterState () {
    dispatch({
      type: INIT_MAIN_PAGE_C_ACTION
    })
  }
})

@connect(
  ({ userinfo, landmark }) => {
    return {
      userinfo,
      landmark,
      userId: userinfo.userId
    }
  },
  mapDispatchToProps
)
class LiveDetail extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: null,
      channel: null,
      company: {
        content: ''
      },
      polyvSetting: null,
      products: null,
      publishers: null,
      liveMode: '', // LIVE,REPLAY
      canPost: false, // 容许报名
      polyLiveState: {
        paused: IS_IOS,
        fullscreen: false,
        showdanmu: true,
        streamstate: ''
      },
      polyVodState: {
        paused: true,
        fullscreen: false
      },
      hideWarm: true,
      tabIndex: 2,
      livePostList: [],
      routes: [
        {
          key: 'questionTab',
          title: '问答'
        },
        {
          key: 'jobTab',
          title: '职位'
        },
        {
          key: 'companyyTab',
          title: '公司'
        }
      ],
      isCollection: null,
      isSignUp: null, // true为已报名
      chatId: null
    }
    this.isFirst = true
  }

  componentDidMount () {
    // this.flatListRef.flatListRef.flatListRef.scrollToEnd({ animated: true });
    // this.flatListRef.flatListRef.flatListRef.scrollToIndex({ viewPosition: 1 });
    this._componentWiiBlurListener()
  }

  componentWillFocus () {
    console.info('componentWillFocuscomponentWillFocus')
    this._setBarStyle()
    this.playOrPause('play')
    this._setOrientationListener(true)// 设置方向监听开关
    this._registerBackHandler()
  }

  playOrPause = (type) => {
    if (IS_ANDROID) {
      const { polyLiveState: { paused: livePaused }, polyVodState: { paused: vodPaused } } = this.state
      if (!livePaused) { // 直播中的播放和暂停
        if (this.polyvWwarmViewRef) {
          this.playOrPauseByObject(this.polyvWwarmViewRef, type)
        } else {
          this.playOrPauseByObject(this.polyvLiveViewRef, type)
        }
      }
      if (!vodPaused) { // 回播中的播放和暂停
        this.playOrPauseByObject(this.polyvVodViewRef, type)
      }
    }
  }

  playOrPauseByObject = (ref, type) => {
    if (ref) {
      if (type === 'play') {
        ref.play()
      } else {
        ref.pause()
      }
    }
  }

  _componentWiiBlurListener = () => {
    this._willBlurSubscription = this.props.navigation.addListener('willBlur',
      payload => {
        if (IS_ANDROID) {
          console.info('_componentWiiBlurListener')
          StatusBar.setBarStyle('dark-content')
          this.playOrPause('pause')
          this._setOrientationListener(false)
        }
      }
    )
  }

  componentDidFocus () {
    const {
      userinfo: { userId },
      navigation: {
        state: { params: { channelId } = {} }
      }
    } = this.props
    ShowLoading()
    homeChannelDetail({ params: { userId, channelId } })
      .then(({ data }) => {
        // channel,company,polyvSetting,products,publishers,
        this.setState({
          ...data,
          isCollection: data.channel.isCollection,
          isSignUp: data.channel.isSignUp,
          admins: data.admins
        })
        this.handlePolyPlayerState(data)
        this.handlePostState(data.channel)
        this.handleChannelState()
      })
      .finally(() => {
        DismissLoading()
      })
    if (userId && !this.watchChannelAdded) {
      watchChannel({ params: { channelId } })
      this.watchChannelAdded = true // 增加观看次数
    }
  }

  _setBarStyle = () => {
    if (IS_ANDROID) {
      StatusBar.setBarStyle('light-content')
    }
  }

  _registerBackHandler = () => {
    BackHandlerUtil.hardwareBackPressListener(this._backPress)
  }

  /**
   * 安卓返回按键
   * @private
   */
  _backPress = () => {
    const {
      polyLiveState,
      polyVodState,
      liveMode
    } = this.state
    const fullscreen = polyLiveState.fullscreen || polyVodState.fullscreen
    if (fullscreen) {
      if (liveMode === 'REPLAY') {
        if (this.polyvVodViewRef) {
          this.polyvVodViewRef.setFullScreen(false)
        }
      } else if (liveMode === 'LIVE') {
        if (this.polyvWwarmViewRef) {
          this.polyvWwarmViewRef.setFullScreen(false)
        } else if (this.polyvLiveViewRef) {
          this.polyvLiveViewRef.setPolyvLiveNativeProps('fullscreen', false)
        }
      }
      return true
    }
    return false
  }

  /**
   * 旋转监听
   * @param enable
   * @private
   */
  _setOrientationListener = (enable) => {
    if (IS_ANDROID) {
      if (this.polyvLiveViewRef) {
        this.polyvLiveViewRef.setOrientationListener(enable)
      }
      if (this.polyvVodViewRef) {
        this.polyvVodViewRef.setOrientationListener(enable)
      }
      if (this.polyvWwarmViewRef) {
        this.polyvWwarmViewRef.setOrientationListener(enable)
      }
    }
  }

  componentWillUnmount () {
    super.componentWillUnmount()
    this.freePostCountTimer()
    this.freeChannelStateTimer()
    this._freeBlurSubscription()
    this._freeBackHandler()
    this._setStatusBar()
  }

  _setStatusBar = () => {
    StatusBar.setBarStyle('dark-content')
  }

  _freeBackHandler = () => {
    BackHandlerUtil.removeHardwareBackPress(this._backPress)
  }

  _freeBlurSubscription = () => {
    this._willBlurSubscription && this._willBlurSubscription.remove()
  }

  goBack = () => {
    this.props.navigation.goBack()
  }

  // 轮询 channelState
  channelStateTimer = null

  freeChannelStateTimer = () => {
    this.channelStateTimer && clearInterval(this.channelStateTimer)
  }

  handleChannelState = () => {
    this.freeChannelStateTimer()
    const { state } = this.state.channel
    if (state === 'NOT_START' || state === 'LIVING') {
      this.channelStateTimer = setInterval(this.channelStateRequest, 15000)
    } else {
      // TODO 释放直播资源
      const { liveMode } = this.state
      if (liveMode === 'LIVE') {
        this.PolyvLiveSkinPropsChange('fullscreen', false)
        this.setState({
          liveMode: '',
          polyLiveState: {
            paused: true,
            fullscreen: false,
            showdanmu: true,
            streamstate: ''
          }
        })
      }
    }
  }

  channelStateRequest = () => {
    const channelId = this.props.navigation.state.params.channelId
    channelState({ params: { channelId } }).then(({ data: state }) => {
      if (state !== this.state.channel.state) {
        this.setState({
          channel: {
            ...this.state.channel,
            state
          }
        }, () => {
          this.handleChannelState()
        })
      }
    })
  }

  // 报名状态处理
  postCountTimer = null

  freePostCountTimer = () => {
    this.postCountTimer && clearInterval(this.postCountTimer)
  }

  handlePostState = ({ state, startTime }) => {
    if (state === 'NOT_START') {
      const fireTime = moment(startTime).unix() // 开播时间
      const limitTime = 1800 // 开播前半小时截止报名
      if (fireTime - moment().unix() <= limitTime) {
        return // 不能报名
      }
      this.setState({
        canPost: true
      })
      this.postCountTimer = setInterval(() => {
        if (fireTime - moment().unix() <= limitTime) {
          this.setState({
            canPost: false
          })
          this.freePostCountTimer()
        }
      }, 1000)
    }
  }

  /* polyvlive begin */
  handlePolyPlayerState = data => {
    const { state } = data.channel
    // const state = 'LIVING'
    if (state === 'NOT_START' || state === 'LIVING') {
      // 直播前、直播中
      this.setState({
        liveMode: 'LIVE'
      })
      if (IS_IOS) {
        this.polyvLiveViewRef.configPolyLivePlayer(data)
      } else {
        if (this.isFirst) this.configWarmPlay(data)
      }
    } else if (state === 'RECORDED_END') {
      // 已回放
      this.setState({
        liveMode: 'REPLAY'
      })
      this.polyvVodViewRef.configPolyVodPlayer(data)
    }
  }

  /**
   * 处理暖场和直播的相关逻辑
   * @param data
   */
  configWarmPlay = (data) => {
    this.isFirst = false
    const { channel: { startTime } } = data
    if (this.isLiveTimeStart(startTime)) { // 没有开始直播
      this.configShowHeaderAndPlay(data)
    } else { // 开始直播，需要判断是否有直播，如果有就播放直播，没有就放暖场视频
      this.configShowHeaderAndPlay(data)
      this.polyvLiveViewRef.configPolyLivePlayer(data)
    }
  }

  /**
   * 直播时间是否开始
   * @param startTime
   * @returns {boolean}
   */
  isLiveTimeStart = (startTime) => {
    const startTimeFormat = Number(new Date(formatTime(startTime)))
    const nowTime = Number(new Date())
    return startTimeFormat > nowTime
  }

  configShowHeaderAndPlay = (data) => {
    const { channel: { vidWarmVideo } } = data
    if (vidWarmVideo) { // 有暖场视频，播放暖场视频
      // 显示头，还有播放按钮
      this.setPolyvLiveState({ streamstate: 'VIDEO', paused: true })
      // this.polyvWwarmViewRef.configPolyVodPlayer(data, 'warm')
    } else {
      this.setPolyvLiveState({ streamstate: '' })
    }
  }

  insertDanmuMsg = danmumsg => {
    const { fullscreen, showdanmu } = this.state
    if (fullscreen && showdanmu) {
      this.polyvLiveViewRef.setNativeProps({
        danmumsg
      })
    }
  }

  PolyvLiveSkinPropsChange = (key, value) => {
    console.log(TAG, 'PolyvLiveSkinPropsChange', key, value)
    const { polyLiveState } = this.state
    if (polyLiveState[key] !== value) {
      if (IS_IOS) {
        if (key === 'streamstate' && value === 'LIVE') {
          // TODO 直播开始 tab跳转到问答
          this.setTabIndex(0)
        }
        this.setPolyvLiveState({ [key]: value })
        this.polyvLiveViewRef.setPolyvLiveNativeProps(key, value)
      } else { // Android
        if (key === 'streamstate') {
          if (value === 'LIVE') { // 开始直播
            this.setTabIndex(0)
            // 开始直播
            const { hideWarm } = this.state
            if (!hideWarm) { // 是否正在播放暖场,销毁暖场
              this.setState({ hideWarm: true })
            }
            this.setPolyvLiveState({ streamstate: value })
            this.polyvLiveViewRef.setOrientationListener(true) // 让直播旋转
          } else { // 直播结束
            const { channel: { vidWarmVideo } } = this.state
            if (vidWarmVideo) {
              value = 'VIDEO'
            }
            this.setPolyvLiveState({ streamstate: value, paused: true })
            this.polyvLiveViewRef.setPolyvLiveNativeProps('fullscreen', false)
            this.polyvLiveViewRef.setOrientationListener(false)
          }
          this.polyvLiveViewRef.setPolyvLiveNativeProps(key, value)
        } else if (key === 'fullscreen') {
          if (this.polyvWwarmViewRef) {
            this.setPolyvLiveState({ [key]: value })
            this.polyvWwarmViewRef.setFullScreen(value)
          } else {
            this.setPolyvLiveState({ [key]: value })
            this.polyvLiveViewRef.setPolyvLiveNativeProps(key, value)
          }
        } else {
          this.setPolyvLiveState({ [key]: value })
          this.polyvLiveViewRef.setPolyvLiveNativeProps(key, value)
        }
      }
    }
  }

  setPolyvLiveState = (liveState, callback) => {
    const { polyLiveState } = this.state
    this.setState({
      polyLiveState: {
        ...polyLiveState,
        ...liveState
      }
    }, callback)
  }

  polyvWarmSkinPropsChange = (key, value) => {
    console.log(TAG, key, value)
    const { polyLiveState } = this.state
    if (polyLiveState[key] !== value) {
      if (key === 'streamstate' && value === 'LIVE') {
        // TODO 直播开始 tab跳转到问答
        this.setTabIndex(0)
      }
      this.setState({
        polyLiveState: {
          ...polyLiveState,
          [key]: value
        }
      })
      this.polyvWwarmViewRef.setPolyvVodNativeProps(key, value)
    }
  }

  polyVodSkinPropsChange = (key, value) => {
    const { polyVodState } = this.state
    console.log(TAG, key, value, polyVodState)
    if (polyVodState[key] !== value) {
      this.setState({
        polyVodState: {
          ...polyVodState,
          [key]: value
        }
      })
      // TODO
      this.polyvVodViewRef.setPolyvVodNativeProps(key, value)

      if (IS_ANDROID && key === 'fullscreen' && this.polyvLiveViewRef) {
        this.PolyvLiveSkinPropsChange(key, value)
      }
    }
  }

  setPolyvLiveViewRef = ref => (this.polyvLiveViewRef = ref)

  setPolyvVodViewRef = ref => (this.polyvVodViewRef = ref)

  setPolyvWarmViewRef = ref => (this.polyvWwarmViewRef = ref)

  headerPlayClick = () => {
    console.log('headerPlayClick')
    const { liveMode, polyLiveState } = this.state
    if (liveMode === 'LIVE' && polyLiveState.streamstate === 'VIDEO') {
      if (IS_IOS) {
        this.PolyvLiveSkinPropsChange('paused', false)
      } else {
        // this.PolyvLiveSkinPropsChange('fullscreen', true)
        this._showPlayWarm()
      }
    } else if (liveMode === 'REPLAY') {
      this.polyVodSkinPropsChange('paused', false)
    }
  }

  /**
   * 显示并且播放暖场
   * @private
   */
  _showPlayWarm () {
    const { channel, polyvSetting } = this.state
    const data = { channel, polyvSetting }
    this.setState({ hideWarm: false }, () => {
      this.polyvWwarmViewRef.configPolyVodPlayer(data, 'warm', () => {
        this.setPolyvLiveState({ paused: false })
        this.polyvWwarmViewRef.initPlay()
      })
    })
  }

  /* polyvlive end */

  // 点击显示分享
  _showShareModal = () => {
    const { channel, company } = this.state
    const { userinfo: { C: { userAvator, userName, gender, userId } } } = this.props
    if (NavigationUtil.jumpLogin() && !channel) return
    const { icon, coverImg, startTime, name } = channel
    const { simpleName, companyName } = company
    this.shareModal = showModal(<SharePage
      onClose={this._closeShareModal}
      shareTopSrc={icon || coverImg}
      userAvator={userAvator}
      gender={gender}
      userId={userId}
      title={`${simpleName || companyName} | ${name}`}
      userName={userName}
      time={startTime}
    />)
  }

  /* 关闭分享 */
  _closeShareModal = (callBack) => {
    this.shareModal.close(callBack)
  }

  // 改变isCollection
  _changeCollection = isCollected => {
    if (isCollected == 0) {
      this.setState({
        isCollection: 1
      })
    } else if (isCollected == 1) {
      this.setState({
        isCollection: 0
      })
    }
  }

  renderScene = ({ route }) => {
    const { userinfo, landmark } = this.props
    const {
      company,
      publishers,
      products,
      isCollection,
      canPost,
      isSignUp,
      channel,
      admins
    } = this.state
    const { companyId } = channel
    const { channelId } = this.props.navigation.state.params
    switch (route.key) {
      case 'questionTab':
        return this.state.tabIndex === 0 && (
          <QueryQuestion
            ref={(ref) => {
              this.flatListRef = ref
            }}
            changeCollection={this._changeCollection}
            handlePlacedTop={this._handlePlacedTop}
            channel={channel}
            userinfo={userinfo}
            landmark={landmark}
            admins={admins}
            channelId={channelId}
            isCollection={isCollection}
            canPost={canPost}
            isSignUp={isSignUp}
            onShareClick={this._showShareModal}
          />
        )
      case 'jobTab':
        return (
          <LivePost navigation={this.props.navigation} userId={this.props.userId} companyId={companyId}
            landmark={landmark} />
        )
      case 'companyyTab':
        return (
          <ScrollView style={[styles.scene, { backgroundColor: '#fff' }]}>
            <CompanyInfo
              company={company}
              publishers={publishers}
              products={products}
            />
          </ScrollView>
        )
      default:
        return null
    }
  }

  setTabIndex = tabIndex => {
    Keyboard.dismiss()
    this.setState({ tabIndex })
  }

  _renderTabBar = props => {
    return (
      <View style={styles.tabBar}>
        {props.navigationState.routes.map((route, i) => {
          return (
            <CustomButton
              params={i}
              key={i}
              style={[styles.tabItem, i <= props.navigationState.routes.length - 2 && styles.borderRight, i === 0 && { paddingLeft: ScaleS(0) }]}
              onPress={this.setTabIndex}
            >
              <Animated.Text
                style={i === this.state.tabIndex ? styles.pitchon : styles.common}
              >
                {route.title}
              </Animated.Text>
            </CustomButton>
          )
        })}
      </View>
    )
  }

  childRender () {
    const {
      channel,
      company,
      tabIndex,
      routes,
      polyLiveState,
      polyVodState,
      liveMode,
      hideWarm
    } = this.state
    if (!channel) {
      return null
    }
    const fullscreen = polyLiveState.fullscreen || polyVodState.fullscreen
    // const fullscreen = true
    const { streamstate } = polyLiveState
    // const liveMode = 'LIVE'
    // showHeader 展示header
    const showHeader = !((liveMode === 'REPLAY' && !polyVodState.paused) || streamstate === 'LIVE' || (streamstate === 'VIDEO' && !polyLiveState.paused))
    // const showHeader = false
    // showHeader 展示header播放按钮
    const showHeaderPlayBtn = liveMode === 'REPLAY' || streamstate === 'VIDEO'
    console.log(TAG, 'showHeader', showHeader)
    return (
      <View style={styles.container}>
        {IS_IOS && <StatusBar backgroundColor="black" barStyle="light-content"/>}
        <View style={[styles.statusbar, fullscreen && { height: 0 }]}/>
        {IS_IOS ?
          (<View
            style={(IS_ANDROID && liveMode === 'REPLAY') ? null : [
              styles.liveplayerContainer,
              fullscreen && styles.liveplayerContainerfull
            ]}
          >
            {liveMode === 'LIVE' && (
              <Fragment>
                {IS_ANDROID && !hideWarm && (
                  <PolyvVodView
                    style={{
                      ...styles.liveplayerContainer,
                      position: 'absolute',
                      zIndex: 1
                    }}
                    goBack={this.goBack}
                    ref={this.setPolyvWarmViewRef}
                    showControl={false}
                    loopPlay={true}
                    polyVodSkinPropsChange={this.polyvWarmSkinPropsChange}
                  />
                )}
                <PolyvLiveView
                  company={company}
                  channel={channel}
                  polyLiveState={polyLiveState}
                  PolyvLiveSkinPropsChange={this.PolyvLiveSkinPropsChange}
                  goBack={this.goBack}
                  ref={this.setPolyvLiveViewRef}
                />
                <PolyvLiveSkin
                  {...polyLiveState}
                  showHeader={showHeader}
                  PolyvLiveSkinPropsChange={this.PolyvLiveSkinPropsChange}
                  goBack={this.goBack}
                />
              </Fragment>
            )}
            {liveMode === 'REPLAY' && (
              IS_ANDROID ? (
                <PolyvVodView
                  style={styles.liveplayerContainer}
                  goBack={this.goBack}
                  showControl={true}
                  ref={this.setPolyvVodViewRef}
                  polyVodSkinPropsChange={this.polyVodSkinPropsChange}
                />
              ) : (
                <PolyvVodView
                  style={styles.liveplayerContainer}
                  goBack={this.goBack}
                  ref={this.setPolyvVodViewRef}
                  polyVodSkinPropsChange={this.polyVodSkinPropsChange}
                />)
            )}
            <LiveHeader
              showHeader={showHeader}
              showHeaderPlayBtn={showHeaderPlayBtn}
              company={company}
              channel={channel}
              goBack={this.goBack}
              headerPlayClick={this.headerPlayClick}
            />
          </View>) :
          (<View>
            {liveMode === 'LIVE' && (
              <Fragment>
                {!hideWarm && (
                  <PolyvVodView
                    style={{
                      ...styles.liveplayerContainer,
                      position: 'absolute',
                      zIndex: 1
                    }}
                    goBack={this.goBack}
                    ref={this.setPolyvWarmViewRef}
                    showControl={false}
                    loopPlay={true}
                    isCanDrag={false}
                    polyVodSkinPropsChange={this.polyvWarmSkinPropsChange}
                  />
                )}
                <View style={[
                  styles.liveplayerContainer,
                  fullscreen && styles.liveplayerContainerfull
                ]}>
                  <PolyvLiveView
                    company={company}
                    channel={channel}
                    polyLiveState={polyLiveState}
                    PolyvLiveSkinPropsChange={this.PolyvLiveSkinPropsChange}
                    goBack={this.goBack}
                    ref={this.setPolyvLiveViewRef}
                  />
                </View>
                <View style={[
                  styles.liveplayerContainer,
                  { backgroundColor: 'transparent', zIndex: 2, position: 'absolute' },
                  fullscreen && styles.liveplayerContainerfull
                ]}>
                  <PolyvLiveSkin
                    {...polyLiveState}
                    showHeader={showHeader}
                    PolyvLiveSkinPropsChange={this.PolyvLiveSkinPropsChange}
                    goBack={this.goBack}
                  />
                </View>
              </Fragment>
            )}
            {liveMode === 'REPLAY' && (
              <PolyvVodView
                style={styles.liveplayerContainer}
                goBack={this.goBack}
                showControl={true}
                ref={this.setPolyvVodViewRef}
                polyVodSkinPropsChange={this.polyVodSkinPropsChange}
              />
            )}
            {
              (liveMode === 'REPLAY' || liveMode === 'LIVE') ? (
                <LiveHeader
                  showHeader={showHeader}
                  showHeaderPlayBtn={showHeaderPlayBtn}
                  company={company}
                  channel={channel}
                  goBack={this.goBack}
                  headerPlayClick={this.headerPlayClick}
                />
              ) : (
                <View style={styles.liveplayerContainer}>
                  <LiveHeader
                    showHeader={showHeader}
                    showHeaderPlayBtn={showHeaderPlayBtn}
                    company={company}
                    channel={channel}
                    goBack={this.goBack}
                    headerPlayClick={this.headerPlayClick}
                  />
                </View>
              )
            }
            <LiveHeader
              showHeader={showHeader}
              showHeaderPlayBtn={showHeaderPlayBtn}
              company={company}
              channel={channel}
              goBack={this.goBack}
              headerPlayClick={this.headerPlayClick}
            />
          </View>)}
        <View style={{ backgroundColor: '#fff', opacity: 0.8, flex: 1 }}>
          <TabView
            navigationState={{
              index: tabIndex,
              routes
            }}
            company={company}
            renderScene={this.renderScene}
            renderTabBar={this._renderTabBar}
            onIndexChange={this.setTabIndex}
            initialLayout={{ width: WIDTH }}
          />
        </View>
      </View>
    )
  }
}

export default LiveDetail

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  statusbar: {
    position: 'relative',
    width: WIDTH,
    height: STATUSBAR_HEIGHT,
    backgroundColor: 'black'
  },
  liveplayerContainer: {
    backgroundColor: '#000000',
    width: WIDTH,
    height: (WIDTH / 16) * 9
  },
  liveplayerContainerfull: {
    // width: HEIGHT,
    // height: WIDTH
    width: '100%',
    height: '100%'
  },
  flex1: {
    flex: 1
  },
  tabBar: {
    flexDirection: 'row',
    borderBottomWidth: ONE_PIXEL,
    marginLeft: ScaleS(20),
    marginRight: ScaleS(20),
    paddingBottom: ScaleS(9),
    borderColor: 'rgba(151, 151, 151, 0.2)'
  },
  tabItem: {
    alignItems: 'center',
    marginTop: ScaleS(16),
    marginBottom: ScaleS(16),
    paddingHorizontal: ScaleS(23)
  },
  pitchon: {
    color: '#000'
  },
  common: {
    color: '#999999'
  },
  borderRight: {
    borderRightWidth: ScaleS(1),
    borderColor: 'rgba(151, 151, 151, 0.4)'
  },
  scene: {
    paddingHorizontal: ScaleS(20)
  }
})
